<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="dimensionElement" src="../visualElement/visualElement.xml"/>
		<d:uses element="formField" src="../formField/formField.xml"/>

		<d:element name="richTextEditor" extends="b:dimensionElement b:formField">
			

			<d:resource type="text/javascript"><![CDATA[
				btl.richTextEditor = {};

				btl.richTextEditor.registerCommandButton = function(oController, oButton){
					if(!oController._.registeredButtons)
						oController._.registeredButtons = [];
					oController._.registeredButtons.push(oButton);

					var sCommand = oButton.getAttribute('richTextCommand');
					bb.html.disableUserSelect(oButton.viewNode);
					oButton.setAttribute('icon', 'btl-richText-'+sCommand);
					oButton.viewGate.innerHTML = '&nbsp;';
					//set the image to the correct location
					//var oImg = document.createElement('img');
					//oImg.className = 'btl-richText-img';
					//oImg.src = bb.uri.resolveUri(sCommand+'.png', sUrl);
					//oButton.viewGate.appendChild(oImg);
				}

				btl.richTextEditor.handleKeyPress = function(eEvent){
					if(eEvent && bb.browser.gecko){
						if (eEvent.ctrlKey) {

							var controller = bb.getControllerFromView(eEvent.target);

							var sKey = String.fromCharCode(eEvent.charCode).toLowerCase();
							if(sKey == 'b') btl.richTextEditor.execCommand(controller, 'bold');
							else if(sKey == 'i') btl.richTextEditor.execCommand(controller, 'italic');
							else if(sKey == 'u') btl.richTextEditor.execCommand(controller, 'underline');
							else return false;

							eEvent.preventDefault();
							eEvent.stopPropagation();
						}
					}
				}

				btl.richTextEditor.execCommand = function(oController, sCommand, sOption) {
					try {
						var oContentWindow = bb.getProperty(oController,'contentWindow');
						var oContentDocument = bb.getProperty(oController,'contentDocument');

						oContentWindow.focus();
						oContentDocument.execCommand(sCommand, false, sOption);
					}catch(e){
						setTimeout( function(){ btl.richTextEditor.execCommand(oController, sCommand, sOption); }, 100);
					}
				}

				btl.richTextEditor.init = function(oController, sContent){
					try {
						if(bb.browser.gecko){
							bb.getProperty(oController,'contentFrame').contentDocument.designMode = 'on';
						}

						var oDoc = bb.getProperty(oController,'contentDocument');

						oDoc.designMode = 'on';

						oDoc.open('text/html', 'replace');
						oDoc.write(bb.getResource(oController, 'defaultDocument'));
						oDoc.close();

						//For looking up the controller again
						oDoc.documentElement.controller = oController;

						bb.html.addEventListener(oDoc, 'keypress', btl.richTextEditor.handleKeyPress, true);

						//Start state-checker
						btl.richTextEditor.queryCommandState(oController);
						//Enable the controls
						oController.viewGate.style.visibility = '';
					}catch (e) {
					 	setTimeout( function(){ if(oController._) btl.richTextEditor.init(oController, sContent); }, 100);
					}
				}

				btl.richTextEditor.queryCommandState = function(oController){
					var oDoc = bb.getProperty(oController,'contentDocument');
					var oButton, i = 0, aCommands = oController._.registeredButtons, bDisabled;
					if(aCommands){
						while(oButton = aCommands[i++]){
							try{
								var sCommand = oButton.modelNode.getAttribute('richTextCommand');

								oButton.setAttribute('disabled', String(!oDoc.queryCommandEnabled(sCommand) ) );

								var sState = String(oDoc.queryCommandState(sCommand));

								if(oButton.modelNode.getAttribute('active') != sState)
									oButton.setAttribute('active',  sState);

							}catch(e){}
						}
					}
				 	setTimeout( function(){ if(oController._) btl.richTextEditor.queryCommandState(oController); }, 200);
				}
			]]></d:resource>

			<d:resource name="defaultDocument" type="text/plain"><![CDATA[
				<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
				<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
					<head>
						<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
						<style type="text/css">
							body {
								background: #FFF;
								margin: 1em;
								padding: 0;
								font-family: Verdana;
							}
						</style>
					</head>
					<body></body>
				</html>
			]]></d:resource>

			<!-- default toolbar when toolbar is omited -->
			<d:resource name="defaultToolBar" type="application/xml"><![CDATA[
				]]><b:toolBar>
					<b:toolBarSwitch richTextCommand="bold"/>
					<b:toolBarSwitch richTextCommand="italic"/>
					<b:toolBarSwitch richTextCommand="underline"/>
					<b:toolBarSeparator/>
					<b:toolBarSwitch richTextCommand="justifyleft"/>
					<b:toolBarSwitch richTextCommand="justifycenter"/>
					<b:toolBarSwitch richTextCommand="justifyright"/>
					<b:toolBarSwitch richTextCommand="justifyfull"/>
					<b:toolBarSeparator/>
					<b:toolBarButton richTextCommand="insertorderedlist"/>
					<b:toolBarButton richTextCommand="insertunorderedlist"/>
					<b:toolBarButton richTextCommand="outdent"/>
					<b:toolBarButton richTextCommand="indent"/>
				</b:toolBar><![CDATA[
			]]></d:resource>

			<d:resource type="text/css"><![CDATA[
				.btl-richText-img {
					width:25px;
					height:24px;
				}
				.btl-richText-border {
					border-style: solid;
					border-width: 1px;
					border-color: ThreeDShadow ThreeDHighLight ThreeDHighLight ThreeDShadow;
				}
				.btl-richText-bold { background-image: url(media/bold.png) !important;  }
				.btl-richText-italic { background-image: url(media/italic.png) !important; }
				.btl-richText-underline { background-image: url(media/underline.png) !important; }
				.btl-richText-justifyleft { background-image: url(media/justifyleft.png) !important; }
				.btl-richText-justifycenter { background-image: url(media/justifycenter.png) !important; }
				.btl-richText-justifyright { background-image: url(media/justifyright.png) !important; }
				.btl-richText-justifyfull { background-image: url(media/justifyfull.png) !important; }
				.btl-richText-insertorderedlist { background-image: url(media/insertorderedlist.png) !important; }
				.btl-richText-insertunorderedlist { background-image: url(media/insertunorderedlist.png) !important; }
				.btl-richText-outdent { background-image: url(media/outdent.png) !important; }
				.btl-richText-indent { background-image: url(media/indent.png) !important; }



			]]></d:resource>

			<d:template type="application/xhtml+xml">
				<table cellpadding="0" cellspacing="0" class="btl-textEditor-border btl-chameleon-highlightBorder">
					<tbody>
						<tr>
							<td style="visibility:hidden;">
								<d:content/>
							</td>
						</tr>
						<tr>
							<td style="border: 1px solid #8C909C; border-top:0;">
								<input type="hidden"/>
								<iframe src="about:blank" frameborder="0" style="width: 100%; margin: 0; padding: 0;box-sizing: border-box; -moz-box-sizing: border-box;-khtml-box-sizing: border-box; border-top: 1px solid #D9D9D9; border-left: 1px solid #D9D9D9;"/>
							</td>
						</tr>
					</tbody>
				</table>
			</d:template>

			<d:attribute name="name" onmap="this.viewNode.getElementsByTagName('input')[0].name = value"/>

			<d:attribute name="width">
				<d:mapper type="text/javascript"><![CDATA[
					this.viewNode.style.width = value;
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="height">
				<d:mapper type="text/javascript"><![CDATA[
					var oFrame = bb.getProperty(this,'contentFrame').style.height = value;
				]]></d:mapper>
			</d:attribute>

			<d:property name="contentFrame">
				
				<d:getter type="text/javascript"><![CDATA[
					return this.viewNode.getElementsByTagName('iframe')[0];
				]]></d:getter>
			</d:property>

			<d:property name="contentWindow">
				
				<d:getter type="text/javascript"><![CDATA[
					var oIFrame = bb.getProperty(this,'contentFrame');
					return oIFrame.contentWindow || oIFrame.document || null;
				]]></d:getter>
			</d:property>

			<d:property name="contentDocument">
				
				<d:getter type="text/javascript"><![CDATA[
					var oContentWindow = bb.getProperty(this,'contentWindow');
					if(oContentWindow) return oContentWindow.document || oContentWindow;
				]]></d:getter>
			</d:property>

			<d:property name="value">
				<d:getter type="text/javascript"><![CDATA[
					var oDoc = this.getProperty('contentDocument');
					return oDoc.body.innerHTML;
				]]></d:getter>
				<d:setter type="text/javascript"><![CDATA[
					try{
						var oDoc = this.getProperty('contentDocument');
						if(!oDoc.documentElement.controller)
							throw '';
						oDoc.body.innerHTML = value;
					}catch(e){
						var oThis = this;
						setTimeout( function(){ if(oThis._) bb.setProperty(oThis, name, value); }, 100);
					}
				]]></d:setter>
				
			</d:property>

			<d:constructor type="text/javascript"><![CDATA[
				btl.richTextEditor.init(this);
			]]></d:constructor>

			<d:handler event="click" type="text/javascript"><![CDATA[
				var oButton = event.target;
				var sCommand = oButton.modelNode.getAttribute('richTextCommand');
				if(sCommand) {
					var sOption = oButton.getAttribute('selected') == 'true';
					btl.richTextEditor.execCommand(this, sCommand, sOption);
				}
			]]></d:handler>

			<d:handler event="DOMNodeInsertedIntoDocument" type="text/javascript"><![CDATA[
				var oCData = bb.xml.getFirstByNodeType(this.modelNode, 4);
				if (oCData) {
					var sData = oCData.nodeValue;
					bb.destruct(bb.getControllerFromModel(oCData));
				}

				var oToolbar = bb.evaluateSmart('child::*[instance-of("b:toolBarBase")]', this);
				if (!oToolbar) {
					oToolbar = bb.getResource(this, 'defaultToolBar').documentElement.cloneNode(true);
					bb.command.create(oToolbar, this, 'appendChild');
				}

				var aChilds = bb.evaluateSmart('[.//*[@richTextCommand]]', this);
				for(var i = 0; i < aChilds.length; i++){
					btl.richTextEditor.registerCommandButton(this, aChilds[i]);
				}

				//Submitting the MPI way
				var oInput = this.viewNode.getElementsByTagName('input')[0];
				var oThis = this;
				if (oInput.form) {
					bb.html.addEventListener(oInput.form, 'submit',	 function(){
						oInput.value = oThis.getProperty('value');
					}, false);
				}

				this.setProperty('value', sData || '');
			]]></d:handler>
		</d:element>
	</d:namespace>
</d:tdl>